﻿@{
    ViewData["Title"] = "CRMAccountInfo";
    Layout = "~/Areas/Console/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .layui-table-cell {
        text-align: center;
        height: auto;
        white-space: normal;
    }

    .layui-table img {
        max-width: 100px
    }
</style>
@section head{
    <script type="text/javascript">
        var wireTransferTable;
        var remittanceAccountTable;
        var cryptocurrencyTable;
        var showType = 0;
        var qrcode;
        var $;
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            treetable: 'treetable-lay/treetable',
            index: 'lib/index',
            qrcode: 'qrcode/qrcode'
        }).use(['table', 'treetable', 'index', 'laydate', 'form', 'qrcode'], function () {
            $ = layui.$
                , form = layui.form
                , admin = layui.admin
                , table = layui.table
                , element = layui.element
                , laydate = layui.laydate
                , qrcode = layui.qrcode;
            element.render();
            element.on('tab(component-tabs-brief)', function (obj) {
                showType = obj.index;
                switch (showType) {
                    case 0:
                        wireTransferTable();
                        break;
                    case 1:
                        remittanceAccountTable();
                        break;
                    case 2:
                        cryptocurrencyTable();
                        break;
                }
            });
            /*电汇账户 开始 */
            wireTransferTable = function () {
                table.render({
                    elem: '#table-datalist-wireTransfer'
                    , toolbar: '#table-datalist-toolbar-wireTransfer'
                    , id: "wireTransferSearch"
                    , url: '/Console/BasicSettings/GetWireTransferListJson'
                    , defaultToolbar: false
                    , limit: 20
                    , title: '数据表'
                    , cols: [[
                        { field: 'index', title: '序号', type: 'numbers', width: 60, templet: '#wireTransferIndex' }
                        //, { field: 'currencyReceipt', title: '收款货币' }
                        //, { field: 'payee', title: '收款人' }
                        , { field: 'receivingBank', title: '收款银行' }
                        , {
                            field: 'bankAccountName', title: '银行户名', templet: function (res) {
                                return res.payee;
                            }
                        }
                        , { field: 'payeeNumber', title: '收款账号' }
                        , { field: 'payeeAddress', title: '收款人地址' }
                        , { field: 'swiftcode', title: 'SWIFT Code' }
                        , {
                            field: 'state', title: '状态', width: 110, templet: function (res) {
                                if (res.state == 1)
                                    return '<input type="checkbox" name="state" lay-skin="switch" lay-text="On|Off" lay-filter="table-state-wireTransfer" value="' + res.id + '" checked="checked">'
                                else
                                    return '<input type="checkbox" name="state" lay-skin="switch" lay-text="On|Off" lay-filter="table-state-wireTransfer" value="' + res.id + '">'
                            }
                        }
                        , { field: 'bankAddress', title: '银行地址' }
                        , { field: 'creator', title: '创建人' }
                        , { field: 'createDate', title: '创建时间' }
                        , { field: 'sort', title: '排序', width: 110 }
                        , { field: 'operate', fixed: 'right', title: '操作', width: 150, toolbar: '#table-datalist-bar-wireTransfer' }
                    ]]
                    , page: { layout: ['prev', 'page', 'next', 'refresh'] }
                    , done: function (res) {
                        if (res.count == 0) {
                            $(".layui-table-main").html('<div class="layui-none">' + top.lang.noData + '</div>');
                        }
                        layer.closeAll('loading');
                        /**多语言初始化 */
                        top.SetListPageLanguage(layui);
                    }
                });
            };
            table.on('toolbar(table-datalist-wireTransfer)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                switch (obj.event) {
                    case 'addNew':
                        top.OpenPageByKey(layui, "addWireTransfer", 2, '1000px', '790px', '/Console/BasicSettings/CreateWireTransfe');
                        break;
                };
            });
            table.on('tool(table-datalist-wireTransfer)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    var postData = {
                        id: data.id
                    };
                    top.ConfirmByKey(layui, 'confirmDelete', postData, "/Console/BasicSettings/DeleteWireTransfer", "POST", "deleteSuccess", "deleteFail", function () {
                        wireTransferTable();
                    });
                } else if (obj.event === 'edit') {
                    top.OpenPageByKey(layui, "editWireTransfer", 2, '1000px', '790px', '/Console/BasicSettings/EditWireTransfe?id=' + data.id);
                }
            });
            form.on('switch(table-state-wireTransfer)', function (obj) {
                var state = 1;
                if (obj.elem.checked) {
                    state = 1;
                } else {
                    state = 0;
                }
                $.ajax({
                    type: "POST",
                    url: "/Console/BasicSettings/UpdateWireTransferState",
                    data: {
                        id: this.value
                        , intState: state
                    }, // 你的formid
                    async: true,
                    error: function (request) {
                        alert("Connection error");
                    },
                    beforeSend: function (xhr) {
                        layui.layer.load();
                    },
                    success: function (data) {
                        var item = eval(data);
                        if (item.code == 0) {
                            top.ShowMessageByKey(layui, "submitSuccess", 6, 1000, function () {
                                wireTransferTable();
                            });
                        } else {
                            /**提示语弹框 */
                            top.AlertByKey(layui, "submitFail", 0);
                        }
                        layer.closeAll('loading');
                    }
                });
            });
            /*电汇账户 结束 */

            /*汇款账户 开始 */
            remittanceAccountTable = function () {
                table.render({
                    elem: '#table-datalist-remittanceAccount'
                    , toolbar: '#table-datalist-toolbar-remittanceAccount'
                    , id: "remittanceAccountSearch"
                    , url: '/Console/BasicSettings/GetRemittanceAccountListJson'
                    , defaultToolbar: false
                    , limit: 20
                    , title: '数据表'
                    , cols: [[
                        { field: 'index', title: '序号', type: 'numbers', width: 60, templet: '#remittanceAccountIndex' }
                        //, { field: 'currencyReceipt', title: '收款货币' }
                        , {
                            field: 'remittingBank', title: '汇款银行', templet: function (res) {
                                return res.bank;
                            }
                        }
                        , {
                            field: 'bankAccountName', title: '银行户名', templet: function (res) {
                                return res.accountName;
                            }
                        }
                        , {
                            field: 'bankAccountNo', title: '银行账号', templet: function (res) {
                                return res.accountNumber;
                            }
                        }
                        , { field: 'branchName', title: '支行名称' }
                        , {
                            title: '收款二维码', field: 'qrcode', align: 'center', width: 130,
                            templet: function dataUrl(d) {
                                var img = "<img src='" + d.qrcode + "' onclick='imgcli(this)'>";
                                return img;
                            }
                        }
                        , {
                            field: 'state', title: '状态', width: 110, templet: function (res) {
                                if (res.state == 1)
                                    return '<input type="checkbox" name="state" lay-skin="switch" lay-text="On|Off" lay-filter="table-state-remittanceAccount" value="' + res.id + '" checked="checked">'
                                else
                                    return '<input type="checkbox" name="state" lay-skin="switch" lay-text="On|Off" lay-filter="table-state-remittanceAccount" value="' + res.id + '">'
                            }
                        }
                        , { field: 'creator', title: '创建人' }
                        , { field: 'createDate', title: '创建时间' }
                        , { field: 'sort', title: '排序', width: 110 }
                        , { field: 'operate', fixed: 'right', title: '操作', width: 150, toolbar: '#table-datalist-bar-remittanceAccount' }
                    ]]
                    , page: { layout: ['prev', 'page', 'next', 'refresh'] }
                    , done: function (res) {
                        if (res.count == 0) {
                            $(".layui-table-main").html('<div class="layui-none">' + top.lang.noData + '</div>');
                        }
                        layer.closeAll('loading');
                        /**多语言初始化 */
                        top.SetListPageLanguage(layui);
                    }
                });
            };
            table.on('toolbar(table-datalist-remittanceAccount)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                switch (obj.event) {
                    case 'addNew':
                        top.OpenPageByKey(layui, "addRemittanceAccount", 2, '1000px', '680px', '/Console/BasicSettings/CreateRemittanceAccount');
                        break;
                };
            });
            table.on('tool(table-datalist-remittanceAccount)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    var postData = {
                        id: data.id
                    };
                    top.ConfirmByKey(layui, 'confirmDelete', postData, "/Console/BasicSettings/DeleteRemittanceAccount", "POST", "deleteSuccess", "deleteFail", function () {
                        remittanceAccountTable();
                    });
                } else if (obj.event === 'edit') {
                    top.OpenPageByKey(layui, "editRemittanceAccount", 2, '1000px', '680px', '/Console/BasicSettings/EditRemittanceAccount?id=' + data.id);
                }
            });
            form.on('switch(table-state-remittanceAccount)', function (obj) {
                var state = 1;
                if (obj.elem.checked) {
                    state = 1;
                } else {
                    state = 0;
                }
                $.ajax({
                    type: "POST",
                    url: "/Console/BasicSettings/UpdateRemittanceAccountState",
                    data: {
                        id: this.value
                        , intState: state
                    }, // 你的formid
                    async: true,
                    error: function (request) {
                        alert("Connection error");
                    },
                    beforeSend: function (xhr) {
                        layui.layer.load();
                    },
                    success: function (data) {
                        var item = eval(data);
                        if (item.code == 0) {
                            top.ShowMessageByKey(layui, "submitSuccess", 6, 1000, function () {
                                remittanceAccountTable();
                            });
                        } else {
                            /**提示语弹框 */
                            top.AlertByKey(layui, "submitFail", 0);
                        }
                        layer.closeAll('loading');
                    }
                });
            });
            /*汇款账户 结束 */

            /*加密货币地址 开始 */
            cryptocurrencyTable = function () {
                table.render({
                    elem: '#table-datalist-cryptocurrency'
                    , toolbar: '#table-datalist-toolbar-cryptocurrency'
                    , id: "cryptocurrencySearch"
                    , url: '/Console/BasicSettings/GetcryptocurrencyListJson'
                    , defaultToolbar: false
                    , limit: 20
                    , title: '数据表'
                    , cols: [[
                        { field: 'index', title: '序号', type: 'numbers', width: 60, templet: '#cryptocurrencyIndex' }
                        , {
                            field: 'currencyType', title: '币种类型', templet: function (res) {
                                return res.currencyReceipt;
                            }
                        }
                        , {
                            field: 'network', title: '区块链网络', templet: function (res) {
                                return res.network;
                            }
                        }
                        , {
                            field: 'cryptocurrencyAddress', title: '加密货币地址', templet: function (res) {
                                return res.receivingAddress;
                            }
                        }
                        , {
                            title: '二维码地址', field: 'qrcodeAddress', align: 'center',
                            templet: function dataUrl(d) {
                                var img = "<div id='div" + d.id + "'></div>";
                                return img;
                            }
                        }
                        , {
                            field: 'state', title: '状态', width: 110, templet: function (res) {
                                if (res.state == 1)
                                    return '<input type="checkbox" name="state" lay-skin="switch" lay-text="On|Off" lay-filter="table-state-cryptocurrency" value="' + res.id + '" checked="checked">'
                                else
                                    return '<input type="checkbox" name="state" lay-skin="switch" lay-text="On|Off" lay-filter="table-state-cryptocurrency" value="' + res.id + '">'
                            }
                        }
                        , { field: 'creator', title: '创建人' }
                        , { field: 'createDate', title: '创建时间' }
                        , { field: 'sort', title: '排序', width: 110 }
                        , { field: 'operate', fixed: 'right', title: '操作', width: 150, toolbar: '#table-datalist-bar-cryptocurrency' }
                    ]]
                    , page: { layout: ['prev', 'page', 'next', 'refresh'] }
                    , done: function (res) {
                        if (res.count == 0) {
                            $(".layui-table-main").html('<div class="layui-none">' + top.lang.noData + '</div>');
                        }
                        layer.closeAll('loading');
                        /**多语言初始化 */
                        top.SetListPageLanguage(layui);
                        res.data.forEach(function (item) {
                            $('#div' + item.id).qrcode({
                                render: "canvas", //也可以替换为table
                                width: 100,
                                height: 100,
                                text: item.receivingAddress
                            });
                            $('#div' + item.id).click(function () {
                                divShow(item.receivingAddress);
                            });
                        });
                    }
                });
            };
            table.on('toolbar(table-datalist-cryptocurrency)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                switch (obj.event) {
                    case 'addNew':
                        top.OpenPageByKey(layui, "addCryptocurrencyAddress", 2, '1000px', '680px', '/Console/BasicSettings/Createcryptocurrency');
                        break;
                };
            });
            table.on('tool(table-datalist-cryptocurrency)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    var postData = {
                        id: data.id
                    };
                    top.ConfirmByKey(layui, 'confirmDelete', postData, "/Console/BasicSettings/Deletecryptocurrency", "POST", "deleteSuccess", "deleteFail", function () {
                        cryptocurrencyTable();
                    });
                } else if (obj.event === 'edit') {
                    top.OpenPageByKey(layui, "editCryptocurrencyAddress", 2, '1000px', '680px', '/Console/BasicSettings/Editcryptocurrency?id=' + data.id);
                }
            });
            form.on('switch(table-state-cryptocurrency)', function (obj) {
                var state = 1;
                if (obj.elem.checked) {
                    state = 1;
                } else {
                    state = 0;
                }
                $.ajax({
                    type: "POST",
                    url: "/Console/BasicSettings/UpdatecryptocurrencyState",
                    data: {
                        id: this.value
                        , intState: state
                    }, // 你的formid
                    async: true,
                    error: function (request) {
                        alert("Connection error");
                    },
                    beforeSend: function (xhr) {
                        layui.layer.load();
                    },
                    success: function (data) {
                        var item = eval(data);
                        if (item.code == 0) {
                            top.ShowMessageByKey(layui, "submitSuccess", 6, 1000, function () {
                                cryptocurrencyTable();
                            });
                        } else {
                            /**提示语弹框 */
                            top.AlertByKey(layui, "submitFail", 0);
                        }
                        layer.closeAll('loading');
                    }
                });
            });
            /*加密货币地址 结束 */

            switch (showType) {
                case 0:
                    wireTransferTable();
                    break;
                case 1:
                    remittanceAccountTable();
                    break;
                case 2:
                    cryptocurrencyTable();
                    break;
            }
        });

        function imgcli(obj) {
            var src = $(obj).attr("src");
            var imgHtml = "<div style='overflow:auto;display:flex;align-items:center;width:700px;height:700px;justify-content:center;'>"
                + "<img style='width:auto;height:auto;text-align:center;' src='" + src + "' /></div>";
            //弹出层
            layer.open({
                type: 1,
                shade: true,
                shade: [0.4, '#000000'],
                title: false, //不显示标题
                area: ['auto', 'auto'],
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {

                }
            });
        }

        function divShow(receivingAddress) {            
            $('#showqrcode').qrcode({
                render: "canvas", //也可以替换为table
                width: 500,
                height: 500,
                text: receivingAddress
            });
            //弹出层
            layer.open({
                type: 1,
                shade: true,
                shade: [0.4, '#000000'],
                title: false, //不显示标题
                area: ['700px', '700px'],
                content: $("#divShowQrcode"),
                cancel: function () {
                    $("#showqrcode").html("");
                }
            });
        }
    </script>
}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                        <ul class="layui-tab-title">
                            <li lay-event="wireTransfer" class="layui-this">电汇账户</li>
                            <li lay-event="remittanceAccount">汇款账户</li>
                            <li lay-event="cryptocurrencyAddress">加密货币地址</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <script type="text/html" id="wireTransferIndex">
                                    {{d.LAY_TABLE_INDEX+1}}
                                </script>
                                <table class="layui-hide" id="table-datalist-wireTransfer" lay-filter="table-datalist-wireTransfer"></table>
                                <script type="text/html" id="table-datalist-toolbar-wireTransfer">
                                    <div class="layui-btn-container">
                                        <button class="layui-btn layui-btn-sm" lay-event="addNew">新增</button>
                                    </div>
                                </script>
                                <script type="text/html" id="table-datalist-bar-wireTransfer">
                                    <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
                                    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</button>
                                </script>
                            </div>
                            <div class="layui-tab-item">
                                <script type="text/html" id="remittanceAccountIndex">
                                    {{d.LAY_TABLE_INDEX+1}}
                                </script>
                                <table class="layui-hide" id="table-datalist-remittanceAccount" lay-filter="table-datalist-remittanceAccount"></table>
                                <script type="text/html" id="table-datalist-toolbar-remittanceAccount">
                                    <div class="layui-btn-container">
                                        <button class="layui-btn layui-btn-sm" lay-event="addNew">新增</button>
                                    </div>
                                </script>
                                <script type="text/html" id="table-datalist-bar-remittanceAccount">
                                    <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
                                    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</button>
                                </script>
                            </div>
                            <div class="layui-tab-item">
                                <script type="text/html" id="cryptocurrencyIndex">
                                    {{d.LAY_TABLE_INDEX+1}}
                                </script>
                                <table class="layui-hide" id="table-datalist-cryptocurrency" lay-filter="table-datalist-cryptocurrency"></table>
                                <script type="text/html" id="table-datalist-toolbar-cryptocurrency">
                                    <div class="layui-btn-container">
                                        <button class="layui-btn layui-btn-sm" lay-event="addNew">新增</button>
                                    </div>
                                </script>
                                <script type="text/html" id="table-datalist-bar-cryptocurrency">
                                    <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
                                    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</button>
                                </script>
                                <div id="divShowQrcode" style='overflow:auto;display:flex;align-items:center;justify-content:center;max-width: 100%;max-height: 100%'>
                                    <div id='showqrcode' style='max-width: 100%;max-height: 100%;position: absolute;top: 50%;transform: translateY(-50%);'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

